<template>
  <div class="y-login-wrap">
    <div class="form" ref="loginform">
      <h1>登录/注册</h1>
      <form novalidate>
        <div v-if="loginPane">
          <p class="account">
            <label for="account">账号</label>
            <input type="text" class="input" required id="account" v-model="account" />
            <span class="validation req">请输入账号</span>
          </p>
          <p class="password">
            <label for="password">密码</label>
            <input
              class="input"
              required
              type="password"
              id="password"
              v-model="password"
            />
            <span class="validation req">请输入密码</span>
            <span class="validation error">账号或者密码错误</span>
          </p>
        </div>
        <div v-else>
          <p class="account">
            <label for="account">账号</label>
            <input type="text" class="input" required id="account" v-model="account" />
            <span class="validation req">请输入账号</span>
          </p>
          <p class="account">
            <label for="account">昵称</label>
            <input type="text" class="input" required id="account" v-model="nickname" />
            <span class="validation req">请输入昵称</span>
          </p>
          <p class="password">
            <label for="password">密码</label>
            <input
              class="input"
              required
              type="password"
              id="password"
              v-model="password"
            />
            <span class="validation req">请输入密码</span>
          </p>
          <p class="password">
            <label for="password">请再次输入密码</label>
            <input
              class="input"
              required
              type="password"
              id="password"
              v-model="againPassword"
            />
            <span class="validation req">请输入密码</span>
          </p>

        </div>
        <p class="login">
          <input type="submit" value="登录" @click="login" />
          <br />
          <input type="submit" value="注册" @click="register" />
        </p>
      </form>
    </div>
  </div>
</template>

<script>
import { login, register } from "../service/UmsService";
import { userInfo } from "../service/config";
export default {
  data() {
    return {
      account: "",
      password: "",
      againPassword: "",
      nickname: "",
      loginPane: true,
    };
  },
  mounted() {
    let validateThisField = (field) => {
      if (field.required && field.value === "") {
        field.classList.add("required");
        formIsValid = false;
      }
    };
    let form = this.$refs.loginform;
    let fields = form.querySelectorAll("input");
    let formIsValid = true;

    form.addEventListener("submit", function (e) {
      e.preventDefault();
      Array.prototype.forEach.call(fields, validateThisField);
      // also have a global state on the form
      if (!formIsValid) {
        form.classList.remove("errors");
        setTimeout(function () {
          form.classList.add("errors");
        }, 0);
      }
    });
    form.addEventListener(
      "blur",
      function (e) {
        e.target.classList.remove("required");
        e.target.classList.remove("invalid");
        validateThisField(e.target);
      },
      true
    );
  },
  methods: {
    login() {
      if (!this.loginPane) {
        this.loginPane = true;
        return;
      }
      const that = this;
      login(this.account, this.password).then((response) => {
        const data = response.data;
        if (data.code == 200) {
          userInfo().setUserInfo(data.data);
          userInfo().setToken(data.data.tokenHead + data.data.token);
          that.$router.push("/");
        } else if(data.code == 404) {
          alert("账号密码错误")
        }
      });
    },
    register() {
      if (this.loginPane) {
        this.loginPane = false;
        return;
      }
      if(this.againPassword != this.password) {
        alert("两次密码不相同");
        return;
      }
      const that = this;
      register({ "account": this.account, "password": this.password, "name": this.nickname}).then((response) => {
        const data = response.data;
        if (data.code == 200) {
          alert("等待审核");
          that.$router.push("/");
        } else if(data.code == 491) {
          alert(data.message);
        }
      });
    
    },
  },
};
</script>

<style>
/*** Note: I put the animation first in the CSS and all the "page styling under, but you might want to do that on real projects and respect the cascade. 

Also for the purpose of the demo during the conference I'm using .checked but normaly you could your [type="checkbox"] to target the checkbox 
Also note that  ***/
/****** 1. We can do nice things with :checked ******/
/* let's animate the transition on the checkbox background */
/* "normal" state */
.checkbox + label:before {
  background: #ffffff;
  border: 1px solid #d8d8d8;
}
/* transitionned state when checked */
.checkbox:checked + label:before {
  background: #5a3b5d;
  border-color: #5a3b5d;
}
/* applying transition */
.checkbox + label:before {
  transition: background 0.2s, border-color 0.2s;
  /* double transition, yup ! */
}
/* Let's animate the mark */
.checkbox:not(:checked) + label:after {
  transform: scale(0);
}
.checkbox:checked + label:after {
  transform: scale(1);
}
.checkbox + label:after {
  transition: transform 0.4s;
}
/****** 2. Let's shake this form  ******/
/* Creating the animation */
@-webkit-keyframes shakeMe {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-10px);
  }
  40%,
  80% {
    transform: translateX(10px);
  }
}
@keyframes shakeMe {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-10px);
  }
  40%,
  80% {
    transform: translateX(10px);
  }
}
/* Applying the animation */
.errors {
  -webkit-animation-name: shakeMe;
  animation-name: shakeMe;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}
/****** Here come the unicorns, aka all the styling not useful for the animation demo at the conference :)  ******/
.y-login-wrap {
  background: #409eff;
  font-family: "Raleway", sans-serif;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form {
  background: #fff;
  border: 1px solid #d9d9d9;
  color: #636363;
  width: 300px;
  border-radius: 4px;
  margin: 0 auto;
  padding: 20px 30px;
}
.form h1 {
  text-transform: uppercase;
  font-weight: normal;
  font-size: 1.5em;
  text-align: center;
  margin: 0;
  padding: 10px 0px;
  border-bottom: 1px solid #dcdcdc;
}
form p {
  margin: 25px 0 10px 0;
  position: relative;
}
.account label,
.password label,
.input {
  display: block;
  width: 100%;
  padding-bottom: 10px;
  box-sizing: border-box;
  text-align: left;
}
/* Submit button Styling */
[type="submit"] {
  display: block;
  color: #5a3b5d;
  font-weight: bold;
  border-radius: 2px;
  background: #409eff;
  box-shadow: 5px 5px 0 0 #409eff, inset 4px 4px 0 0 white;
  border: 2px solid #5a3b5d;
  border-radius: 3px;
  padding: 10px;
  width: 100%;
  margin: 0 auto;
  transition: background 0.3s;
}
[type="submit"]:hover {
  background: white;
  box-shadow: 5px 5px 0 0 #409eff, inset 4px 4px 0 0 white;
}
[type="submit"]:active,
[type="submit"]:focus {
  /* position: relative;
        top: 1px; */
}
[type="password"],
[type="text"] {
  padding: 20px;
}
[type="password"]:focus,
[type="text"]:focus {
  outline: none;
}
/* Styling the input */
.input {
  font-size: 0.85em;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  height: 40px;
  transition: border-color 0.4s, box-shadow 1s;
}
.input:active,
.input:focus {
  border: 1px solid #5a3b5d;
  box-shadow: 4px 4px 0 #c7a9cd;
}
/* Removing the checkbox from screen */
.checkbox {
  position: absolute;
  left: -300%;
}
.checkbox + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}
/* Creating the fake checkbox */
.checkbox + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 2px;
}
/* accessibility */
.checkbox:focus + label:before {
  border: 1px solid #5a3b5d;
  box-shadow: 4px 4px 0 #c7a9cd;
}
/* Adding the SVG mark */
.checkbox + label:after {
  content: " ";
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.7 8.7" enable-background="new 0 0 10.7 8.7"><path fill="white" d="M4.2 8.7c-.3 0-.5-.3-.7-.5l-3.2-3.1c-.4-.4-.4-1.1 0-1.5s1-.4 1.4 0l2.4 2.3 4.9-5.6c.4-.4 1-.5 1.4-.1.4.4.5 1 .1 1.4l-5.6 6.6c-.1.2-.4.5-.7.5z"/></svg>')
    no-repeat;
  /* OMG you can embed SVG in background, awesoome */
  position: absolute;
  left: 2px;
  top: 3px;
  width: 13px;
  height: 13px;
}
/****** Validation messages ******/
.invalid {
  border-color: #b7004c;
}
.required {
  border-color: #b54300;
}
.validation {
  display: block;
  font-size: 0.8em;
  padding-top: 0.5em;
  position: absolute;
  right: 0;
  opacity: 0;
  transition: opacity 1s;
}
.validation.req {
  color: #b54300;
}
.validation.error {
  color: #b7004c;
}
.invalid:not(.required) ~ .validation.error {
  opacity: 1;
  transform: scale(1);
}
.required ~ .validation.req {
  opacity: 1;
  transform: scale(1);
}
</style>
